<html>

<head>
    <meta charset="utf-8">
    <title>资源</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/${BasePath}/static/css/headpic.css" media="all" />
    <link rel="stylesheet" href="/${BasePath}/static/layui/css/layui.css" media="all" type="text/css">
    <link rel="stylesheet" href="/${BasePath}/static/css/public.css" media="all" type="text/css"> </head>

<body class="childrenBody">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>资源</legend>
	</fieldset>
    <form id="infoForm" class="layui-form" lay-filter="example">
        <input type="hidden" name="id" id="id" value="${sPermission.id!'0'}">
        <div class="layui-col-md6 layui-col-xs12">

            <div class="layui-form-item">
                <label class="layui-form-label">资源类型</label>
                <div class="layui-input-block">
				      <select name="permissionType" id="permissionType" >
				        <option value="0">顶级菜单</option>
				        <option value="1">二级菜单</option>
				        <option value="2">三级菜单</option>
				        <option value="3">按钮（暂无）</option>
				      </select>                
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">父级菜单</label>
                <div class="layui-input-block">
                	<input type="hidden" name="fatherId" id="pId" value="${sPermission.fatherId!''}">
                	<input type="text" autocomplete="off" id="pName" value="请选择"  onclick="showTree();"  lay-verify="required" class="layui-input realName">
		            <div id="treeNode"  style="display:none; position: absolute;z-index:100; background-color: white;">
		                <div  id="tree"></div>
		            </div>                    	
                </div>        
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源名称</label>
                <div class="layui-input-block">
                    <input type="text" name="permissionName" lay-verify="required" value="${sPermission.permissionName!''}" placeholder="请输入资源名" class="layui-input realName"> </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源URL</label>
                <div class="layui-input-block">
                    <input type="text" name="permissionUrl" value="${sPermission.permissionUrl!''}" placeholder="请输入资源URL" class="layui-input realName"> </div>
            </div>
            <div class="layui-form-item">
		        <label for="icon" class="layui-form-label">
		          <span class="x-red">*</span>图标
		        </label>
		        <div class="layui-input-inline">
		          <div style="margin-left: 20px;margin-top:5px">
		          	<input type="hidden" name="permissionIcon" id="permissionIcon" value="${sPermission.permissionIcon!''}">
		            <ul>
		              <li style="display: inline-block;width: 50px;" id="menu-icon"><i class="layui-icon" id="icon"  style="font-size: 25px;">${sPermission.permissionIcon!''}</i></li>
		              <li style="display: inline-block;"><i class="layui-btn layui-btn-primary layui-btn-sm" id="select_icon">选择图标</i></li>
		            </ul>
		          </div>
		        </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源顺序</label>
                <div class="layui-input-block">
                    <input type="text" name="permissionOrder" lay-verify="required" value="${sPermission.permissionOrder!'0'}" placeholder="请输入顺序" class="layui-input realName"> </div>
            </div> 
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容"  name="permissionSynopsis" class="layui-textarea myself">${sPermission.permissionSynopsis!''}</textarea>
                </div>
            </div>             
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" type="button" lay-filter="form">立即提交</button>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript" src="/${BasePath}/static/layui/layui.js" charset="utf-8" ></script>
    <script type="text/javascript" src="/${BasePath}/static/js/common/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
    function getIframeByElement(element){
        var iframe;
        $("iframe", window.parent.document).each(function(){
            if(element.ownerDocument === this.contentWindow.document) {
                iframe = this;
            }
            return !iframe;
        });
        return iframe;
    }
    var datass;
    $(document).ready(function(){ 
    	$.ajax({
    		type: 'post',
    		url: "/${BasePath}/power/getMem",
    		dataType: 'json',
    		async:false, 
    		success: function(data){
    			datass = data;
    		}
    	});	
    }); 
    layui.use(['form', 'layedit', 'laydate','tree', 'layer'], function() {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;
        
	        layui.tree({
	            elem:'#tree',
	            nodes:datass
	            ,click: function(node){
	                if(node.menuType=='3'){
	                    layer.msg('请勿选择按钮', {icon: 5,anim:6});
	                    return false;
	                }
	              $('#pId').val(node.id);
	              $('#pName').val(node.name);
	            }
	      });

        form.on('submit(form)', function() {
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/${BasePath}/power/savePermission",
                    data: $('#infoForm').serialize(),
                    async: false,
                    error: function(request) {
                        layer.msg('系统错误！');
                    },
                    success: function(data) {
                        if(data.code = "1") {
                            layer.msg(data.msg, {
                                time: 1000
                            }, function() { //提示框设定显示1秒
                            	window.location.href=document.referrer;
                            })
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
            })
                        //表单初始赋值
        form.val('example', {
            "permissionType": "${sPermission.permissionType!''}",
        })
        $('#select_icon').click(function(){
        	var iframe = getIframeByElement(document.body);
        	var iframeObj=$(iframe);
        	var index = iframeObj.attr("data-id");
            var p=$('#pName');
            var cityObj = p;
            var cityOffset =p.offset();
            var width=p.css('width');
            parent.layer.open({
              id:'icon',
              type: 2,
              area: [width,'600px'],
              shade: 0.4,
              zIndex: layer.zIndex,
              title: '图标',
              content: '/${BasePath}/common/icon?index='+index
            });
          });
    });
 

    function showTree(){
        var p=$('#pName');
        var cityObj = p;
        var cityOffset =p.offset();
        var width=p.css('width');
        $('#treeNode').css({
            left: '0px',
            top: '40px',
            width:width,
            border:'1px solid #e6e6e6'
        }).slideDown('fast');
        $('body').bind('mousedown', onBodyDown);
        $('#treeNode').css('display','inline');
    }
    function hideMenu() {
        $('#treeNode').fadeOut('fast');
        $('body').unbind('blur', onBodyDown);
    }
    function onBodyDown(event) {
        if (! ( event.target.id == 'treeNode' || $(event.target).parents('#treeNode').length > 0)) {
            hideMenu();
        }
    }
    </script>
</body>

</html>